<template>
	<form-container title="令牌列表" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-button
			danger
			style="margin-bottom: 10px"
			:disabled="selectedRowKeys.length === 0"
			:loading="beatchExitLoading"
			@click="beachExittoken"
			>批量强退
		</a-button>
		<a-table
			:columns="columns"
			:data-source="loadData"
			:row-selection="rowSelection"
			bordered
			:row-key="(record) => record.token"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'device'">
					<a-tag v-if="record.device === 'PC'" color="blue">
						{{ $TOOL.dictTypeData('AUTH_DEVICE_TYPE', record.device) }}
					</a-tag>
					<a-tag v-if="record.device === 'APP'" color="purple">
						{{ $TOOL.dictTypeData('AUTH_DEVICE_TYPE', record.device) }}
					</a-tag>
					<a-tag v-if="record.device === 'MINI'" color="orange">
						{{ $TOOL.dictTypeData('AUTH_DEVICE_TYPE', record.device) }}
					</a-tag>
				</template>
				<template v-if="column.dataIndex === 'tokenRemain'">
					<a-tooltip>
						<template #title>{{ record.tokenRemain }}</template>
						<a-progress
							v-if="record.tokenRemainPercent * 100 > 80"
							:percent="record.tokenRemainPercent * 100"
							:show-info="false"
							status="success"
						/>
						<a-progress
							v-if="record.tokenRemainPercent * 100 > 20 && record.tokenRemainPercent * 100 < 80"
							:percent="record.tokenRemainPercent * 100"
							:show-info="false"
							status="active"
						/>
						<a-progress
							v-if="record.tokenRemainPercent * 100 < 20"
							:percent="record.tokenRemainPercent * 100"
							:show-info="false"
							status="exception"
						/>
					</a-tooltip>
				</template>
				<template v-if="column.dataIndex === 'token'">
					<a-tooltip>
						<template #title>{{ record.token }}</template>
						{{ record.token }}
					</a-tooltip>
				</template>
				<template v-if="column.title === '在线状态'">
					<a-tag v-if="record.clientIds.length > 0" color="green">
						{{ $TOOL.dictTypeData('ONLINE_STATUS', 'ONLINE') }}
					</a-tag>
					<a-tag v-else color="grey">
						{{ $TOOL.dictTypeData('ONLINE_STATUS', 'OFFLINE') }}
					</a-tag>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-popconfirm title="确定要强退此令牌吗？" @confirm="exitToken(record)">
						<a-button type="link" danger size="small" :loading="exitLoading">强退</a-button>
					</a-popconfirm>
				</template>
			</template>
		</a-table>
	</form-container>
</template>

<script setup>
	import monitorApi from '@/api/auth/monitorApi'
	import { cloneDeep } from 'lodash-es'

	const columns = [
		{
			title: '登录设备',
			dataIndex: 'device',
			width: 90
		},
		{
			title: '在线状态',
			// dataIndex: 'onlineStatus',
			width: 90
		},
		{
			title: '有效期',
			dataIndex: 'tokenRemain'
		},

		{
			title: '令牌',
			dataIndex: 'token',
			ellipsis: true,
			width: 80
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '100px',
			scopedSlots: { customRender: 'action' }
		}
	]
	// columns.push()
	// 字段数据
	const loadData = ref([])
	// 默认是关闭状态
	let visible = ref(false)
	// 多选的
	const selectedRowKeys = ref([])
	const exitLoading = ref(false)
	const beatchExitLoading = ref(false)
	const monitorType = ref()
	const userId = ref()
	// 定义emit事件
	const emit = defineEmits({ successful: null })
	// 打开抽屉
	const onOpen = (id, tokenInfoList, type) => {
		monitorType.value = type
		userId.value = id
		loadData.value = cloneDeep(tokenInfoList)
		visible.value = true
	}
	// 关闭抽屉
	const onClose = () => {
		loadData.value = []
		monitorType.value = ''
		userId.value = 0
		visible.value = false
	}
	// 多选
	const rowSelection = {
		onChange: (rowKeys) => {
			selectedRowKeys.value = rowKeys
		}
	}
	// 删除
	const exitToken = (record) => {
		let params = {
			id: userId.value,
			tokens: [record.token]
		}
		exitLoading.value = true
		if (monitorType.value === 'B') {
			monitorApi
				.monitorTokenBExit(params)
				.then(() => {
					exitTask(params)
				})
				.finally(() => {
					exitLoading.value = false
				})
		} else {
			monitorApi
				.monitorTokenCExit(params)
				.then(() => {
					exitTask(params)
				})
				.finally(() => {
					exitLoading.value = false
				})
		}
	}
	// 批量强退
	const beachExittoken = () => {
		let params = {
			id: userId.value,
			tokens: []
		}
		selectedRowKeys.value.forEach((key) => {
			params.tokens.push(key)
		})
		beatchExitLoading.value = true
		if (monitorType.value === 'B') {
			monitorApi
				.monitorTokenBExit(params)
				.then(() => {
					exitTask(params)
					selectedRowKeys.value = []
				})
				.finally(() => {
					beatchExitLoading.value = false
				})
		} else {
			monitorApi
				.monitorTokenCExit(params)
				.then(() => {
					exitTask(params)
					selectedRowKeys.value = []
				})
				.finally(() => {
					beatchExitLoading.value = false
				})
		}
	}
	const exitTask = (params) => {
		loadData.value.forEach((item, index, array) => {
			params.tokens.forEach((items) => {
				if (item.token === items) {
					delete array[index]
				}
			})
		})
		emit('successful')
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
